import React, { Component } from "react";

class App extends Component {
  state = {
    count: 10,
    show: true,
    done: 1,
    list: ["zhangsan", "lisi", "lubenwei"],
    content: "<p>React.js是一个构建UI的库</p>",
  };

  fn1() {
    // this.setState((prevState) => {
    //   return {
    //     show: !prevState.show,
    //   };
    // });
    this.setState((prevState) => ({
      show: !prevState.show,
    }));
  }

  fn2() {
    this.setState((prevState) => ({
      done: prevState.done === 1 ? 2 : 1,
    }));
  }

  fn3() {
    // this.setState((prevState) => {
    //   return {
    //     list: prevState.list.push("zhisang"),  ❌
    //     list: prevState.list.concat("zhisang"),  ✔
    //     list: [...prevState.list, "zhisang"],  ✔
    //   };
    // });

    // list已经改变了
    this.state.list.push("zhisang");
    this.setState({});
  }

  render() {
    return (
      <>
        <h3>渲染数据</h3>
        <p>{this.state.count}</p>
        {this.state.show && <p>hello</p>}
        <button onClick={this.fn1.bind(this)}>btn</button>

        <hr />

        {this.state.done === 1 ? <span>点赞</span> : <span>取消点赞</span>}
        <button onClick={this.fn2.bind(this)}>btn</button>

        <hr />

        <ul>
          {this.state.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.fn3.bind(this)}>btn</button>

        <hr />

        <div>{this.state.content}</div>
        {/* 显示html */}
        <div dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
      </>
    );
  }
}

export default App;
